<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  百度cdn引入jquery  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>

    <form action="/user/login" method="post">
        <center>
            <h3>用户注册页面</h3><br>
            用户名：<input type="text" name="username" onblur="kp(this)"/><span id="sp"></span><br>
            密  码：<input type="password" name="password" /><br>
            手机号：<input type="text" name="telephonenumber"/><br>
            验证码：<input type="text" name="kapchar" /><br>
            <img src="/captcha" style="width:85px" id="cap"/><br>
            <input type="submit" value="注册"/>
        </center>
    </form>

    <script type="text/javascript">

        //当光标移开输入框输入时就调用此方法
        function kp(ipt){
            //1.获取input输入框的value
            var value = ipt.value;
            //2.进行验证
            if(value != null && value !=""){
                //1.创建Ajax
                var xmlhttp = new XMLHttpRequest();

                //2.设置状态改变监听
                xmlhttp.onreadystatechange = function(){

                    //5.获取响应数据
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                        var result = xmlhttp.responseText; //获取结果

                        //1.找到span标签
                        var sp = document.getElementById("sp");

                        if(result == "1"){
                            //成功的 span 提示一句绿色的话
                            sp.innerHTML=""; //清空
                            var ft = document.createElement("font");
                            var fttext = document.createTextNode("恭喜您，用户名可以使用!"); //文本标签
                            ft.setAttribute("color", "green");
                            ft.appendChild(fttext);
                            sp.appendChild(ft);
                        }else{
                            //失败的 span 提示一句红色的话
                            sp.innerText = "很抱歉，该用户名已经被注册!";
                            sp.style.color = "red";
                        }
                    }
                }
                //3.设置ajax  method  url
                xmlhttp.open("POST","/user/login");
                //4.发送请求
                //设置一个请求头
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("value="+value);
            }
        }

        $(function () {
            // 注册验证码图片的单击事件
            $("#cap").click(function () {
                // 让img图片重新发送请求 给 验证码servlet
                $("#cap").attr('src','/captcha?t='+new Date().getTime());
            });
        });

    </script>
</body>
</html>
